<template>
    <div class="register">
        <div class="header">
            <a href="javascript:void(0)"><img src="../assets/images/retreat.png" alt=""/></a>
            <span>新用户快捷支付-注册</span>
        </div>
        <div id="gw-user">
            <div><img src="../assets/images/logo.png" alt=""/></div>
            <p v-show="checkStore()"  class="recmend">推荐人：{{gw}}</p>
            <div class="form-label">
                <span>手机号</span>
                <input type="text" placeholder="请输入区号+手机号"  v-model="mobile" v-verify="mobile" v-verify.mobile="mobile" />
                <div class="help-block"  v-remind="mobile"></div>
            </div>
            <div class="form-label">
                <span>验证码</span>
                <input class="vcode" type="number" v-model="checkCode" placeholder="请输入手机验证码" />
                <button id="gain-code" @click="send">{{getCode}}</button>
                <div class="help-block" v-if="prompt_status">{{prompt}}</div>
            </div>
            <div class="form-label">
                <span>密&nbsp;码</span>
                <input type="password" placeholder="请输入密码" v-model="password" v-verify="password" />
                <div class="help-block" v-remind="password"></div>
            </div>
            <p>确定后，表示同意
                <!-- <router-link to="agreement">《壹键哥软件许可及服务协议》</router-link> -->
                <a href="https://api.e-gatenet.cn/registerprotocol.htm">《壹键哥软件许可及服务协议》</a>
            </p>
        </div>
        <div class="login-url"><router-link :to="{name: 'Login', query: this.salesOutletInfo}">已有账号，去登陆</router-link></div>
        <button id="submit" @click="beforeSubmit">确定</button>
        
        <!-- 福利弹窗 -->
        <!-- <div class="mask"></div>
        <div class="share">
            <div class="close" @click.stop="shareAlert = false"></div>
            <div class="immediately_register">
                <p>
                    <span>送<s></s></span><span>您<s></s></span><span>一<s></s></span><span>波</span>
                </p>
                <h1>大福利</h1>
                <div class="voucher">
                    <p><img src="../assets/images/voucher.png" alt=""></p>
                    <div class="footer_mask">
                        <p><img src="../assets/images/footer_mask.png" alt=""></p>
                        <div class="register_btn"><img src="../assets/images/registerbtn.png" alt=""></div>
                    </div>
                </div>
            </div>
            <div class="immediately_share">
                <div class="explain">
                    <p>活动说明：</p>
                    <span>注册有机会随机获得XXXX，分享并成功注册可获得XXXX</span>
                </div>
                <div class="sharing_people">
                    <span>分享者</span>
                    <input type="text" placeholder="请输入您的GW号">
                </div>
                <button class="share_btn">立即分享</button>
            </div>
        </div> -->

        <loading v-show="showLoading"></loading>
        <msg-box ref="msgBox"></msg-box>
        <open-app ref="openApp" :weixinTips="isWeixin" ></open-app>
    </div>
</template>

<script>
import Vue from 'vue'
import loading from './Loading'
import msgBox  from './MsgBox'
import openApp from './OpenApp'

import 'vue-layer-mobile/need/layer.css'
import layer from 'vue-layer-mobile'
Vue.use(layer) 
export default {
  name: 'register',
  components:{
      loading,
      msgBox,
      openApp,
  },
  data () {
    return {
        checkStoreStatus: false,
        mobile:"",
        checkCode: "",
        password:"",
        getCode:"获取验证码",
        prompt_status: false,
        prompt:"",
        salesOutletInfo:{},
        registMethod: 3, //注册方式 １：普通注册 ２：个人扫码 ３：门店扫码
        deviceIdentity: "agent", //设备标识
        clientSource: 1, //设备系统类型 ，1=》网站
        wait:false,//倒计时等待
        showLoading:false,
        disable:false, //店铺信息不正确，不允许注册，发送短信,
        gw:"",//商家gw
        publicKey:'', //公钥
        rsaRegister:'', //加密后的注册信息
        rsaLogin:'',    //加密后的登录信息
        isWeixin:navigator.userAgent.toLowerCase().indexOf('micromessenger') > 0,
        shareAlert: parseInt(this.$route.query.shareType) === 1 //旧弹窗判断用，弃用
    }
  },
  created() {
    //用户分享进入
    if (parseInt(this.$route.query.shareType) === 1) {
        this.$router.push({name: 'UserRegister', query:{gw: this.$route.query.gw, shareType: 1, salesOutletUID: this.$route.query.salesOutletUID}})
    }
  },
  mounted(){

      /*
      如果微信支付接口开放，则允许微信访问
      * https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_3

       this.$http.post("/api/getPaymentList").then(res => {
        if (res.body.isSuccess != 1) return false;
        const data = res.body.resData.payTypes;
        if( data.toString().indexOf("微信")>=0){
            this.isWeixin = false
        }
      });
      */
  },
  methods: {
    alert(msg){
        this.$refs.msgBox.alert(msg);
    },
    tel(msg){
        this.telPlaceholder = msg
    },
    //发送手机验证码
    send(){
        //event.preventDefault();
        if(!this.$verify.check('mobile') || this.wait || this.disable ) return false;
        this.showLoading = true;
        this.$http.post('/api/sms',{mobile:this.mobile}).then(res=>{
            //返回数据格式{"isSuccess": 1,"code": "sample string 2","description": "sample string 3","resData": true}
            if(res.body.isSuccess == 1){
                this.prompt = "发送成功"
                this.doSend = true
            }else if(res.body.isSuccess == 0 && res.body.description.indexOf('已注册')>-1){
                this.$layer.open({
                    content: '手机号已注册,请直接登陆',
                    skin: 'msg',
                    time: 3000
                })
            }else{
                // this.prompt = "发送失败，请60s后重试"
                if(res.body.description){
                    this.alert(res.body.description)
                }else{
                    this.alert(res.body)
                }
                
            }
            this.showLoading = false
        },res=>{
            this.$layer.open({
                content: '请求异常，稍后重试',
                skin: 'msg',
                time: 2000
            })
            this.showLoading = false
        });
        var seconds = 60, timer = null;
        this.getCode = seconds + "S";
        timer = setInterval(function () {
            seconds--;
            this.getCode = seconds + "S";
            this.wait = true
            if (seconds <= 0) {
                clearInterval(timer)
                timer = null;
                this.getCode = "重新获取";
                this.wait = false
            }
        }.bind(this), 1000)
    },
    //提交
    beforeSubmit(){
        //event.preventDefault();
        if(!this.$verify.check() || this.disable){
            return false;
        }else{
            if(!this.doSend){
                // this.prompt = "请获取手机验证码"
                this.alert("请获取手机验证码")
                return false
            }
            //加密
            if(this.publicKey.length>0){
                let jse = new this.$jsEncrypt.JSEncrypt()
                jse.setPublicKey(this.publicKey);
                this.rsaLogin =  '1\t' + this.mobile + '\t' + this.password + '\t';
                this.rsaRegister =  this.mobile + '\t' + this.password + '\t' + this.checkCode + '\t' + this.gw + '\t' + this.registMethod + '\t' + this.$route.query.salesOutletUID;
                this.rsaLogin = jse.encrypt(this.rsaLogin,this.publicKey);
                this.rsaRegister = jse.encrypt(this.rsaRegister,this.publicKey);
                //清空密码
                this.password = '';
            }
            this.deviceIdentity = navigator.userAgent;
            //提交表单
            const regInfo = {
                mobile: this.mobile,
                checkCode: this.checkCode,
                password: this.password,
                referralCode: this.gw,
                salesOutletUID: this.$route.query.salesOutletUID,
                registMethod: this.registMethod,
                deviceIdentity: this.deviceIdentity,
                clientSource: this.clientSource,
                rsaRegister:this.rsaRegister,
                rsaLogin:this.rsaLogin,
            }
            this.showLoading = true
            this.$http.post('/api/register',regInfo).then(res=>{
                //返回{"isSuccess": 1,"code": "sample string 2", "description": "sample string 3", "resData": "sample string 4"}
                if(res.body.isSuccess == 1){
                    //设置session
                    //this.alert("注册成功");
                    this.login();
                    this.showLoading = false;
                }
                if(res.body.isSuccess == 0){
                    if(res.body.description.indexOf("被使用") > 0){
                        this.$layer.dialog({
                            content: '手机号已注册请直接登陆',
                            btn: ['去登陆']
                        }).then(res=>{
                            if(res === 0){
                                this.$router.push({name: 'Login',query: this.salesOutletInfo})
                            }
                        })
                    }else{
                        //this.alert(res.body.description);
                        this.$layer.open({
                            content: res.body.description,
                            skin: 'msg',
                            time: 2000
                        })
                    }
                    // console.log(res.body);
                    this.showLoading = false
                }
            },res=>{
                this.$layer.open({
                    content: '请求异常稍后重试',
                    skin: 'msg',
                    time: 2000
                })
                this.showLoading = false
            })
        }
    },
    //注册完成后登录
    login(){
        this.$http.post('/api/login').then(res=>{
            if(res.data == '1000'){
                this.$layer.open({
                    content: '注册成功,将跳转至下单页面',
                    skin: 'msg',
                    time: 100
                })
                //console.log('注册成功后自动登录成功');
                setTimeout(()=>{
                    this.$router.push({ path: '/order', query: this.salesOutletInfo});
                },100)
                //跳转到商家订单页
                
            }else{
                this.$layer.open({
                    content: '自动登陆失败',
                    skin: 'msg',
                    time: 100
                })
            }
        },res=>{
            this.$layer.open({
                content: '登陆接口异常稍后重试',
                skin: 'msg',
                time: 100
            })
        })
        return true
    },
    
    //检查店铺状态
    checkStore(){
         if(this.checkStoreStatus) return true;
         this.$http.post('/api/store',{gw: this.$route.query.gw, suid: this.$route.query.salesOutletUID}).then(res=>{
            if(res.body.error != ""){
                this.disable = true;
                this.alert(res.body.error);
            }else{
                this.gw = res.body.data.gw;
                this.salesOutletInfo.salesOutletName = res.body.data.salesOutletName;
                this.salesOutletInfo.storeUID = res.body.data.storeUID;
                //this.salesOutletInfo.formPath = 'register';
                this.salesOutletInfo.salesOutletUID = this.$route.query.salesOutletUID;
                this.publicKey = res.body.data.publicKey;
                //登陆用到
                this.salesOutletInfo.publicKey = res.body.data.publicKey;
            }
        },res=>{

        })
        this.checkStoreStatus = true;
        return true;
    }
  },
  verify: {
    mobile: ["required","myMobile"],
    password: ["required",{minLength: 6, message: "密码不得小于6位"},{maxLength: 12,message: "密码不得大于12位"},'checkPassword']
  },
}
</script>

<style scoped>
body {background-color:#fff !important;}
/*表单样式1*/
img{width:100%;height:100%;}
#gw-user{width:80%;min-height: 2.6667rem;margin:0 auto;margin-top:2.6rem;background: #E2F8F9;text-align: center;}
#gw-user div>img{width:1.84rem;height:1.92rem;position: relative;top:-0.96rem;}
.form-label{width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;background:#52BEB3;border-top:1px solid #A7E7E1;text-align:left;font-size: 0.4rem;}
.form-label span{display:inline-block;width:22%;padding-left:0.2667rem;font-family: serif;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;line-height: 1.3333rem;}
.form-label input{height:0.8rem;width:70%;background:#52BEB3;padding:0;box-sizing: border-box;}
.help-block{color:#FF3E32;text-align: left;padding-left:0.2667rem;padding-bottom:0.0667rem;}
.prompt{display:none;position: absolute; top:50%;left:50%; padding:0.2667rem 0.48rem;background:#fff;  -webkit-border-radius: 0.1333rem;  -moz-border-radius: 0.1333rem;  border-radius: 0.1333rem; -webkit-transform: translate(-50%,-50%);  -moz-transform: translate(-50%,-50%);  -ms-transform: translate(-50%,-50%);  -o-transform: translate(-50%,-50%);  transform: translate(-50%,-50%);  }
.form-label .vcode{width:40%;}
.form-label button{float: right;width:34%;height:1.32rem;background:#298A80;color:#fff;}
#gw-user >p:last-child{font-size: 0.32rem;white-space: nowrap;line-height:1.3333rem;padding:0 0.1333rem;overflow: hidden;}
#submit{display:block;width:80%;height:1.2rem;color:#fff;background:#52BEB3;margin:0 auto;}
.recmend{margin-bottom: 0.2rem;}
.login-url{width: 80%;margin:0.5rem auto 1.2rem;font-size:0.3rem;text-decoration: underline;text-align: right;}
.mask{position: fixed;width:100%;height:100%;background:#000;opacity: .5;left:50%;top:0;transform: translateX(-50%);}
.share{position: fixed;width:7.3867rem;background:#FE1647;top:50%;left:50%;transform: translate(-50%,-50%);}
.close{position: absolute;top:0.16rem;right: 0.16rem;width:0.6rem;height:0.6rem;background:url('../assets/images/share_close.png') no-repeat;background-size: 100%;}
.immediately_register{padding-top: 1.6rem;text-align: center;color:#fff;background:#FD2E59;}
.immediately_register p{line-height: 0.6667rem;}
.immediately_register p>span{font-size: 0.6rem;}
.immediately_register p>span s{display:inline-block;width:0.24rem;height:0.3467rem;background: url('../assets/images/splitbar.png') no-repeat;background-size: 100%;margin: 0 0.2rem}
.immediately_register h1{font-size: 0.92rem;letter-spacing:0.8rem;text-align: center;padding-left: 0.8rem;font-weight: normal;}
.voucher{margin-top: 0.9333rem;height:4.64rem;position: relative;}
.voucher p{width:6.2133rem;height:auto;margin:0 auto;}
.footer_mask{position: absolute;bottom:0;width:100%;}
.footer_mask p{width:100%;height:2.8667rem;}
.register_btn{position:absolute;left:50%;bottom:0;width:2.2rem;height:2.2rem;transform: translateX(-50%);}
.immediately_share{padding:0 0.6rem;margin-top:0.2667rem;overflow: hidden;}
.explain{color:#F8A5B6;overflow: hidden;}
.explain p,.sharing_people span{float: left;width:28%;text-align: right;}
.explain span,.sharing_people input{float: left;width:70%;}
.share_btn{display:block;width:2.04rem;height:0.6rem;border:1px solid #FF718E;color:#fff;font-size: 0.32rem;background:#FD1647;margin:1.0667rem auto 0.16rem;}
.sharing_people{margin-top:0.4rem;overflow: hidden;color:#F8A5B6;display: none;}
.sharing_people span{padding-right: 0.2667rem;box-sizing: border-box;}
.sharing_people input{width:3.64rem;height:0.48rem;font-size: 0.32rem;padding-left: 0.24rem;}
.sharing_people input::-webkit-input-placeholder{color: #A0A0A0;}
.sharing_people input:-moz-placeholder {color:#A0A0A0;}
.sharing_people input::-moz-placeholder{color: #A0A0A0;}
.sharing_people input:-ms-input-placeholder{color: #A0A0A0;}

/*显示分享者样式 父元素添加样式类名sharing_people_show*/
.sharing_people_show .sharing_people{display: block;}
.sharing_people_show .immediately_register{padding-top: 1.2rem}
.sharing_people_show .share_btn{margin-top: 0.4rem}
</style>